<template>
  <div class="body">
    <div v-title>分享送大礼</div>
    <div class = "inviteImage">
        <img src="../../assets/inviteBackground.png">        
    </div>
    <div class = "inviteContent">
        <div class="contentLeft">
            <p>成功邀请</p>
            <p><strong>0</strong>人</p>
        </div>
        <div class="contentRight">
            <p>您已赚到</p>
            <p><strong>0</strong>元</p>
        </div>
    </div>
    <div class= "inviteButton">
          <x-button id="inviteClick"  type="default">立即邀请</x-button>
    </div>
    <div class="inviteRule">
        <p style="font-size: 20px;margin: 0px;">活动规则</p>
        <p>
            1、邀请好友注册并在诚信金融平台每次年年红（12个月）项目，推荐人可获得被邀请人投资1%奖励；
            <br>
            1、邀请好友注册并在诚信金融平台每次年年红（12个月）项目，推荐人可获得被邀请人投资1%奖励；
            <br>
            1、邀请好友注册并在诚信金融平台每次年年红（12个月）项目，推荐人可获得被邀请人投资1%奖励；
        </p>
    </div>
  </div>
</template>

<script>
import { XButton } from 'vux'

export default {
  components: {
    XButton
  },
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!'
    }
  }
}
</script>

<style>

.body{
  background-color: red;
  display: block;
}
.inviteContent{
  height: 100px;
}
.contentLeft{
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
}
.contentRight{
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
}
.inviteContent p{
  color: white;
}
.inviteContent p strong{
  font-size: 20px; 
}
.inviteButton{
  margin: 10px auto;
  width: 60%;
}
#inviteClick{
  background-color: #7400FF;
  color: white;
}
</style>
